<!DOCTYPE html>
<!-- 教程地址 https://blog.csdn.net/weixin_72388638/article/details/130034235-->

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    canvas{
      /*  设置画布边框 以及外边距*/
      border: 1px solid;
      margin: 100px 0 0 100px;
    }
  </style>
</head>
<body>
<canvas width="600" height="400" id="mycancas">
  当前浏览器版本不支持，请升级
</canvas>
<button id="but1"> 清屏</button>
  <script>
      /**
       * 如果想要实现图形变换操作
       * 可以创建线段数组存储线段，对线段数组操作即可
       * @type {HTMLElement}
       */

    var canvas=document.getElementById("mycancas");
      //得到画布的上下文,上下文有两个 2d和3d
      //所有的图形绘制都是通过ctx属性或者方法进行设置的，和canvas标签没有关系了
      var ctx=canvas.getContext("2d")
     var but1=document.getElementById("but1");



         //创建线段类  多个线段对象相互连接就成为了点
      class MyLine{
        x2;
        y2;
        //构造方法设置第一个点
        constructor(x,y) {
          this.x=x;
          this.y=y;
        }
        //更新 设置第二给点
        LineUpdata=function (x,y){

          this.x2=x;
          this.y2=y;
        }


        //绘制
        LineRraw=function (){
          ctx.beginPath();
          ctx.moveTo(this.x,this.y);//第一个点
          ctx.lineTo(this.x2,this.y2); //点三个

          ctx.strokeStyle="red" //设颜色
          ctx.stroke(); //开始绘制(把前面点连接)
            //这段线段绘制完成后 把当前线段的末尾点坐标赋值给下一段的起始点
            MyMouseXy.x=this.x2;
            MyMouseXy.y=this.y2;
        }

      }

      //记录鼠标的状态
      class MyMouseXy {
          // 鼠标左键按下的坐标  也是画线段的开始坐标
          static x;
          static y;
          //鼠标移动后的坐标  也是画线段的末端的坐标
          static x2;
          static y2;
          //鼠标左键是否弹起
        static ifmouseup=false;
      }

    // 获取鼠标在画布移动的坐标
    canvas.addEventListener("mousemove", function(event){
        MyMouseXy.x2=event.offsetX;
        MyMouseXy.y2=event.offsetY;

        console.log("mousemove=",MyMouseXy.x2,MyMouseXy.y2)


    })

    //鼠标左键弹起时候
    canvas.addEventListener("mouseup",function (event){
        //鼠标状态修改成谈起
        console.log("鼠标弹起")
        MyMouseXy.ifmouseup=true;

    })


    //主绘制类，想要填加跟多的绘制图形 只需要添加方法 或者改变MyRraw.Rae的指向即可
      class MyRraw{
          static raew;
          //绘制直线的方法Rae
         static  Rae =function () {
             //通过监听器连续执行方法  把鼠标左键的点击时候的位置xy赋值给线段首点的坐标xy,再把鼠标移动后的点x2y2坐标赋值给线段末端点的坐标x2,y2 两点确定一条直线
              this.raew = setInterval(() => {
               //创建线段 把鼠标的点传入
                let myline=new MyLine(MyMouseXy.x,MyMouseXy.y);
                myline.LineUpdata(MyMouseXy.x2,MyMouseXy.y2);
                //当鼠标左键弹起时候停止绘制
                if(MyMouseXy.ifmouseup!=true) {
                    myline.LineRraw();
                }

              })
          }

      }


    //画布鼠标监听 按下  按下后绘制图形
    canvas.addEventListener("mousedown",function (event){
        MyMouseXy.ifmouseup=false;

        //对于画线而言这是 鼠标按下时候获取
        MyMouseXy.x=event.offsetX;
        MyMouseXy.y=event.offsetY;



        //调用主绘制类的绘制直线的方法,绘制不同的图形只需要 动态修改 MyRraw.Rae();方法即可
        MyRraw.Rae();

    })


    //当 “清屏按钮被点击”
    but1.onclick=function (){
        console.log("被点击")
        ctx.clearRect(0,0,canvas.width,canvas.height);
      //  ctx.clearRect(0,0,100,100);
    }

</script>
</body>
</html>